<template>
    <div class="register-list">
        <div class="l">
            <search-box></search-box>
        </div>
        <div class="r" v-loading="loading">
            <el-table :data="list">
                <el-table-column label="设备编号" prop="id" />
                <el-table-column label="设备名称" prop="name" />
                <el-table-column label="设备状态" prop="status" />
                <el-table-column label="设备分类" prop="category" />
                <el-table-column label="设备数量" prop="number" />
                <el-table-column label="设备单价" prop="price" />
                <el-table-column label="购置时间" prop="time" />
                <el-table-column label="操作" prop="" />
            </el-table>
            <el-pagination
                :current-page="pageNo"
                :total="total"
                :page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import SearchBox from '@/components/SearchBox.vue'
export default {
    components:{SearchBox},
    data() {
        return {
            list: [],
            total: 0,
            pageNo: 1,
            pageSize: 10,
            loading: true
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            // pageNo当前页数1开始、pageSize每页条数、id设备编号、name设备名称、status设备状态(传状态id)、category设备分类(传分类id)
            this.loading = true;
            const { pageNo, pageSize } = this;
            this.axios
                .post("/pre-list", {
                    pageNo,
                    pageSize,
                    id: "",
                    name: "",
                    status: "",
                    category: ""
                })
                .then(data => {
                    if (!data.code) {
                        this.list = data.data.list;
                        this.total = data.data.total;
                    }
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        onSizeChange(size) {
            console.log(size);
            this.pageSize = size;
            this.pageNo = 1;
            this.getList();
        },
        onCurrentChange(page) {
            console.log(page);
            this.pageNo = page;
            this.getList();
        }
    }
};
</script>

<style lang="sass" scoped>
.register-list
    display: flex
    .l
        flex: 0 0 300px
    .r
        flex: 1
</style>
